<template>
  <el-row :gutter="20" type="flex">
    <el-col :span="12">
      <NewCard title="发票参数">
        <el-form
          ref="form"
          :rules="rules"
          :model="form"
          label-width="100px"
          label-position="left"
          v-hasPermi="['base:config:listInvoice']"
        >
          <el-form-item label="服务名称" prop="i_param_service">
            <el-input v-model="form.i_param_service"></el-input>
          </el-form-item>
          <el-form-item label="规格型号" prop="i_param_spec">
            <el-input v-model="form.i_param_spec"></el-input>
          </el-form-item>
          <el-form-item label="单位" prop="i_param_unit">
            <el-input v-model="form.i_param_unit"></el-input>
          </el-form-item>
          <el-form-item label="数量" prop="i_param_num">
            <el-input v-model="form.i_param_num"></el-input>
          </el-form-item>
          <el-form-item label="税率（%）" prop="i_param_tax">
            <el-input v-model="form.i_param_tax"></el-input>
          </el-form-item>
          <el-form-item label="生效日" prop="i_param_effective">
            <el-input v-model="form.i_param_effective"></el-input>
          </el-form-item>
          <el-form-item label="失效日" prop="i_param_invalidation">
            <el-input v-model="form.i_param_invalidation"></el-input>
          </el-form-item>
        </el-form>
      </NewCard>
    </el-col>
    <el-col :span="12">
      <NewCard title="销售方信息">
        <el-form
          ref="info"
          :rules="rules"
          :model="form"
          label-width="140px"
          label-position="left"
          v-hasPermi="['base:config:listInvoice']"
        >
          <el-form-item label="企业名称" prop="i_param_company">
            <el-input v-model="form.i_param_company"></el-input>
          </el-form-item>
          <el-form-item label="纳税人识别号" prop="i_param_no">
            <el-input v-model="form.i_param_no"></el-input>
          </el-form-item>
          <el-form-item label="注册地址" prop="i_param_address">
            <el-input v-model="form.i_param_address"></el-input>
          </el-form-item>
          <el-form-item label="注册电话" prop="i_param_tel">
            <el-input v-model="form.i_param_tel"></el-input>
          </el-form-item>
          <el-form-item label="开户银行" prop="i_param_bank">
            <el-input v-model="form.i_param_bank"></el-input>
          </el-form-item>
          <el-form-item label="银行账号" prop="i_param_card">
            <el-input v-model="form.i_param_card"></el-input>
          </el-form-item>
          <el-form-item label="开票人" prop="i_param_employee">
            <el-input v-model="form.i_param_employee"></el-input>
          </el-form-item>
        </el-form>
      </NewCard>
    </el-col>
    <SubBtn>
      <template slot="btn">
        <el-button round @click="resetForm()">重设</el-button>
        <el-button type="primary" @click="submit" round v-hasPermi="['base:config:edit']">保存</el-button>
      </template>
    </SubBtn>
  </el-row>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import SubBtn from "@/wss/components/subBtn.vue";
import {
  getlistInvoiceApi,
  editlistInvoiceApi,
} from "@/wss/newApi_3-24/base/config.js";

export default {
  name: "Invoice",
  components: { NewCard, SubBtn },
  data() {
    return {
      //发票参数
      form: {
        i_param_service: "",
        i_param_spec: "",
        i_param_unit: "",
        i_param_num: "",
        i_param_tax: "",
        i_param_effective: "",
        i_param_invalidation: "",

        i_param_company: "",
        i_param_no: "",
        i_param_address: "",
        i_param_tel: "",
        i_param_bank: "",
        i_param_card: "",
        i_param_employee: "",
      },
      //表单验证
      rules: {
        i_param_service: [
          { required: true, message: "请输入服务名称", trigger: "blur" },
        ],
        i_param_spec: [
          { required: true, message: "请输入规格型号", trigger: "blur" },
        ],
        i_param_unit: [
          { required: true, message: "请输入单位", trigger: "blur" },
        ],
        i_param_num: [
          { required: true, message: "请输入数量", trigger: "blur" },
        ],
        i_param_tax: [
          { required: true, message: "请输入税率（%）", trigger: "blur" },
        ],
        i_param_effective: [
          { required: true, message: "请输入生效日", trigger: "blur" },
        ],
        i_param_invalidation: [
          { required: true, message: "请输入失效日", trigger: "blur" },
        ],

        i_param_company: [
          { required: true, message: "请输入企业名称", trigger: "blur" },
        ],
        i_param_no: [
          { required: true, message: "请输入纳税人识别号", trigger: "blur" },
        ],
        i_param_address: [
          { required: true, message: "请输入注册地址", trigger: "blur" },
        ],
        i_param_tel: [
          { required: true, message: "请输入注册电话", trigger: "blur" },
        ],
        i_param_bank: [
          { required: true, message: "请输入开户银行", trigger: "blur" },
        ],
        i_param_card: [
          { required: true, message: "请输入银行账号", trigger: "blur" },
        ],
        i_param_employee: [
          { required: true, message: "请输入开票人", trigger: "blur" },
        ],
      },
      // 接口返回没有改动过的数据
      response: {},
    };
  },
  created() {
    this.getlistInvoiceApiFn();
  },
  methods: {
    // 提交数据
    async submit() {
      try {
        await this.$refs.form["validate"]();
          let form = this.form;
          let response = this.response.data;
          response.forEach((item, index) => {
            if (item.type) {
              item.value = form[item.type];
            }
          });

          let { code, msg } = await editlistInvoiceApi(response);
          if (code != 200) return;
          this.$message({
            type: "success",
            message: msg,
          });
          this.getlistInvoiceApiFn();

      } catch (error) {
        try {
          
          await this.$refs.info["validate"]();
         
        } catch (error) {}
      }
    },
    // 获取发票设置数据
    async getlistInvoiceApiFn() {
      let rows = await getlistInvoiceApi();
      this.response = JSON.parse(JSON.stringify(rows));
      let form = this.form;
      // 回显
      rows.data.forEach((item) => {
        // console.log(item);
        if (item.type) {
           form[item.type] = item.value
        }
      });
      this.form = form;
      // console.log(this.form);
    },

    // 重设按钮
    resetForm() {
      this.$refs.form.resetFields();
    },
  },
};
</script>

<style scoped>
::v-deep .el-card__body {
  height: 100%;
}
::v-deep .el-card__body > div {
  height: 92%;
  overflow-y: auto;
}
::v-deep .el-card__body > div::-webkit-scrollbar {
  width: 0;
}
::v-deep .el-form .el-form-item__label {
  color: #2e3f5e;
}



/* 右侧按钮样式 */
::v-deep .subBtn {
  padding: 8px 30px !important;
}
::v-deep .subBtn > .el-button {
  width: 100px;
  padding: 8px 0;
  font-size: 14px;
  color: #606e84;
}
::v-deep .subBtn > .el-button.el-button--primary {
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
}
</style>